<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/cropper/cropper.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--引入 头部片段-->
    <div  th:replace="admin/common/back_common :: header"></div>

    <!--引入 左侧导航片段-->
    <div  th:replace="admin/common/back_common :: left"></div>

    <div class="layui-body layui-bg-gray">
        <!-- 内容主体区域 -->
        <div class="layui-row">
            <div class="layui-col-xs8 layui-col-lg-offset2" style="border: 2px solid #dfe1e4;border-radius:5px;border-top: 5px solid #007bff;background-color: white;height: 70 0px;margin-top: 5%;" >
                <h1 style="margin-left: 5px">基本信息</h1>
                <hr class="layui-bg-gray">
                <div style="margin-top: 50px ;width: 60%">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">网站名</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" lay-verify="title" required autocomplete="off" placeholder="请输入网站名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">单行输入框</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图片</label>
                            <div class="layui-input-block">
                                <img  width="228" id="showImg" height="128"  src="images/default_blog.jpg">
                                <button type="button"
                                        class="layui-btn layui-btn-sm layui-btn-normal"
                                        id="formCoverUpload">选择图片</button>
                            </div>
                        </div>
                        <div class="layui-form-item layui-row layui-col-xs12">
                            <label class="layui-form-label">公告内容</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入公告内容" name="content" id="content" class="layui-textarea userDesc"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item " style="margin-left: 230px;">
                            <div class="layui-input-block" style="margin-left: 350px;margin-top: 20px">
                                <button type="submit" class="layui-btn layui-bg-red" lay-submit="" lay-filter="name">确定修改</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


    </div>
    <!--引入   底部固定区域 -->
    <div  th:replace="admin/common/back_common :: footer"></div>


</div>
<script src="/js/jquery-3.4.1.js"></script>
<script src="/cropper/cropper.js"></script>
<script src="/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '/cropper/layui_modules/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use('cropperUpload'); //加载入口

        layui.use(['element','form','table','layer','laydate','layedit','cropperUpload'],function () {
            var element = layui.element;
            var form=layui.form;
            var table=layui.table;
            var layer=layui.layer;
            var laydate=layui.laydate;
            var layedit=layui.layedit;
            let cropperUpload = layui.cropperUpload;

            //表单封面裁剪图片组件
            formCoverUpload = cropperUpload.init({
                select : "#formCoverUpload",
                aspectRatio : 16 / 9,
                imgWidth : 269,
                imgHeight : 69,
                formDataId : "#blogForm",
                success : function(base64Img,blog,that) { //base64Img  base64格式图片    blog  二进制图
                    $("#showImg").attr("src", base64Img)
                }
            })

            //初始化富文本编辑器
            editIndex = layedit.build('content');


    });

</script>
</body>
</html>